<template>
  <div v-loading="loading" class="miniProcess">
    <div v-if="displayCard.lastIndexOf('tag') !== -1">
      <Tag ref="tag" />
    </div>
    <el-card v-if="displayCard.lastIndexOf('ask') !== -1" class="box-card box-card-list">
      <div slot="header" class="clearfix">
        <div class="area-header-title">
          <span class="card-left"><i class="iconfont icon-yingyong" />
            <span style="font-weight: bold">{{ $t('当前阶段要求') }}</span>
            <!--          <a class="card-right link_a">
            <i class="el-icon-edit" />{{ $t('修改') }}
          </a>-->
          </span></div>
      </div>
      <div class="item">
        <div v-if="processRequirement">
          <span class="font12" style="white-space: pre-wrap;">{{ processRequirement }}</span>
        </div>
        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </div>
    </el-card>

    <el-card v-if="displayCard.lastIndexOf('confirm') !== -1" class="box-card box-card-list">
      <div slot="header" class="clearfix">
        <div class="area-header-title">
          <span class="card-left">
            <i class="iconfont icon-yuebaoribaozhoubao" />
            <span style="font-weight: bold">{{ $t('当前阶段确认事项') }}</span>
          </span>
        </div>
      </div>
      <div>
        <div v-if="wfConfigConfirmedList.length > 0" v-loading="itemLoading">
          <div v-for="(item, index) in wfConfigConfirmedList" :key="index">
            <div class="checkCard" :title="item.confirmedItem">
              <el-checkbox v-model="item.flag" :label="item.confirmedItem" :checked="item.flag" @change="addIndexHandel(index, item.flag)" />
            </div>
            <el-divider class="dividerMargin" />
          </div>
        </div>
        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 当前项目投资主体 -->
    <el-card v-if="displayCard.lastIndexOf('invest') !== -1 && $route.query.showType === 'deal'" class="box-card box-card-list">
      <div slot="header" class="clearfix">
        <div class="area-header-title">
          <span class="card-left"><i class="iconfont icon-gongzuorizhi" />
            <span style="font-weight: bold">{{ $t('投资主体') }}</span>
          </span>
          <span class="add-round" style="width: 25px;height: 25px;" @click="addDealInvestHandle" />
        </div>
      </div>
      <div>
        <div v-if="investList && investList.length > 0">
          <table class="tableFlow">
            <tr>
              <td class="maxWid" style="font-weight: bold;">{{ $t('投资主体名称') }}</td>
              <td class="maxWid" style="font-weight: bold;padding: 7px 0">{{ $t('预计投资金额') + $t('金额单位') }}</td>
            </tr>
            <tr v-for="(item, index) in investList" :key="index">
              <td class="maxWid" :title="item.shortName">
                {{ item.shortName }}
              </td>
              <td class="maxWid" style="padding: 7px 0" :title="item.amountInvestmentEstimate">
                <span v-if="item.amountInvestmentEstimate">{{ moneyFormat(item.amountInvestmentEstimate,'w',2,true) }}</span>
                <span v-else>&nbsp;</span>
              </td>
            </tr>
          </table>
        </div>
        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card v-if="displayCard.lastIndexOf('approve') !== -1 && nextFirstNodeName" class="box-card box-card-list">
      <div slot="header" class="clearfix">
        <div class="area-header-title">
          <span class="card-left"><i class="iconfont icon-wenjianmoban" />
            <span style="font-weight: bold">{{ $t('提交' + nextFirstNodeName + '前需完成审批') }}</span>
          </span>
        </div>
      </div>
      <div>
        <div v-if="wfBusNodeRelyList.length > 0">
          <div v-for="(item, index) in wfBusNodeRelyList" :key="index" class="flexRight">
            <div class="font12">{{ item.wfConfigNode.nodeName }}</div>
            <div class="statusCard">
              <!--              <el-button type="text" size="small" style="color: #303133;">{{ $t('审批状态') }}：</el-button>-->
              <ProcessStatus :status="item.actStatus" :act-id="item.actId" />
            </div>
          </div>
        </div>
        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card v-if="displayCard.lastIndexOf('file') !== -1" class="box-card box-card-list">
      <div slot="header" class="clearfix">
        <div class="area-header-title">
          <span class="card-left"><i class="iconfont icon-xuanzewenjian" />
            <span style="font-weight: bold">{{ $t('当前阶段需上传文件') }}</span>
          </span>
        </div>
      </div>
      <div>
        <div v-if="fileList.length > 0">
          <table class="tableFlow">
            <tr v-for="(item, index) in fileList" :key="index">
              <td class="maxWid" :title="item.nodeName">
                {{ item.nodeName }}
              </td>
              <td class="maxWid" :title="item.name">
                {{ item.name }}
              </td>
              <td class="link-type" :title="item.fileName" @click="onlinePreview(item)">
                {{ item.fileName }}
              </td>
              <td>
                <template v-if="!isEmpty(item.fileLibraryRole)">
                  <el-button
                    v-if="item.fileLibraryRole.downloadAll === 'Y' || ($store.state.user.userId === item.createBy && item.fileLibraryRole.downloadYourself === 'Y')"
                    type="text"
                    icon="el-icon-download"
                    size="mini"
                    @click="downloadDocumentFile(item.fileId)"
                  >{{ $t('下载') }}</el-button>
                </template>
                <!--                <el-upload-->
                <!--                  v-else-->
                <!--                  ref="upload"-->
                <!--                  :limit="1"-->
                <!--                  :accept="accept"-->
                <!--                  :headers="upload.headers"-->
                <!--                  :action="upload.url"-->
                <!--                  :disabled="upload.isUploading"-->
                <!--                  :before-upload="handleBeforeUploadExcel"-->
                <!--                  :on-success="handleFileSuccessExcel"-->
                <!--                  :on-exceed="handleFileExceedExcel"-->
                <!--                  class="uploadExcel"-->
                <!--                >-->
                <!--                <el-button type="text" icon="el-icon-upload" size="mini" @click="startUpload(item.directoryId)">{{ $t('上传') }}</el-button>-->
                <!--                </el-upload>-->
                <div v-else style="padding: 13px 0" />
              </td>
            </tr>
          </table>
        </div>
        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card v-show="displayCard.lastIndexOf('plan') !== -1" v-loading="dealLoading" class="box-card box-card-plan">
      <div slot="header" class="clearfix">
        <div class="area-header-title">
          <span class="card-left radioPlan">
            <!-- <i class="iconfont icon-peizhiguanli" /> -->
            <el-radio-group v-model="radioPlan" size="mini" style="zoom: 0.9;">
              <el-radio-button :label="0">{{ $t('项目跟踪') }}</el-radio-button>
              <el-radio-button :label="1">{{ $t('项目计划') }}</el-radio-button>
            </el-radio-group>
          </span>
          <span class="add-round" style="width: 25px;height: 25px;" @click="addHandle" />
        </div>
      </div>
      <el-timeline v-if="radioPlan === 0" class="scrollArea">
        <template v-if="dealTrackList.length > 0">
          <div v-for="item in dealTrackList" :key="item.id">
            <div class="progressItem" style="width: 100%;" @click="updateHandle(item)">
              <div v-if="item.msgCount > 1" class="msgCount">
                <svg-icon icon-class="message" />
                <span class="icon">{{ item.msgCount }}</span>
              </div>
              <p class="tit">
                <span class="text">{{ formatText(item.details) }}</span>
              </p>
              <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item) }}</el-tag>
              <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item) }}</el-tag>
              <div class="bottom">
                <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
              </div>
            </div>
          </div>
        </template>

        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </el-timeline>
      <div v-if="radioPlan === 1">
        <div v-if="dealPlanTreeList.length > 0" class="planTree">
          <el-tree
            :data="dealPlanTreeList"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
          >
            <div slot-scope="{ node, data }" class="custom-tree-node">
              <div class="link-type">{{ node.label }}</div>
              <div class="describe">
                <span style="padding-right: 5px">{{ data.personChargeName }}</span>
                <span style="padding-right: 5px">{{ parseTime(data.completionTime) }}</span>
                <span>{{ '完成进度(' + data.completeSchedule + '%)' }}</span>
              </div>
            </div>
          </el-tree>
        </div>
        <div v-else class="noneData">
          <div>
            <!-- <svg-icon icon-class="none" class-name="none-icon" /> -->
            <p>{{ $t('暂无内容') }}</p>
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog :title="radioPlan === 1 ? $t('项目计划') : $t('项目跟踪')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" :custom-class="radioPlan === 1 ? 'dialogForm' : 'dialogForm dealTrackDialog'" append-to-body>
      <template v-if="radioPlan === 1">
        <dealSuperviseForm ref="dealSuperviseForm" />
      </template>
      <template v-if="radioPlan === 0">
        <dealTrackForm ref="dealTrackForm" :deal-id="dealTrackId" :is-deal="false" />
      </template>
    </el-dialog>

    <el-dialog v-if="investForm" :title="$t('投资主体')" width="30%" style="height: 45%;margin-top: 40px" :visible.sync="investFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <div v-loading="investLoading" class="readOver">
        <el-form ref="investForm" :model="investForm" :rules="investRule" label-width="120px" class="dataForm">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('投资主体')" prop="investorId">
                <fund-select v-model="investForm.investorId" :placeholder="$t('投资主体')" @change="onChange" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('预计投资金额') + $t('金额单位')" prop="amountInvestmentEstimate">
                <money v-model="investForm.amountInvestmentEstimate" unit="w" :placeholder="$t('预计投资金额')" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="cancel">{{ $t('取消') }}</el-button>
          <el-button type="primary" @click="submitForm">{{ $t('保存') }}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 预览附件 -->
    <OnlinePreview ref="OnlinePreview" :preview-tit="'111'" />
  </div>
</template>
<script>
import { getFirstNodeRightCardData } from '@/api/act/busFlow/wfBusNode'
import { deleteWfBusNodeConfirmed, saveWfBusNodeConfirmed } from '@/api/act/busFlow/wfBusNodeConfirmed'
import Tag from '@/components/Tag/index.vue'
import { downLoadFileOpen } from '@/utils/zipdownload'
import { getToken } from '@/utils/auth'
import { findDealPlanTreeList } from '@/api/deal/supervise/dealSupervise'
import dealSuperviseForm from '@/views/deal/supervise/dealSuperviseForm.vue'
import item from '../../../layout/components/Sidebar/Item.vue'
import { ACCEPT_CONFIG } from '@/utils/config'
const { getDealBeforeInfo } = require('@/api/deal/home/dealBefore')
import dealTrackForm from '@/views/deal/track/dealTrackForm.vue'
import FundSelect from '@/components/Select/fundSelect.vue'
import { listDealInvestment, saveDealInvestment } from '@/api/deal/investment/dealInvestment'
import { moneyFormat } from '../../../utils/ruoyi'
import { getFundBase } from '@/api/fund/fundBase'
import { getDealBase } from '@/api/base/deal/dealBase'
import { findFileByIdsHavePer } from '@/api/file/filefolder/folder'

export default {
  components: {
    FundSelect,
    Tag,
    dealSuperviseForm,
    dealTrackForm
  },
    props: {
        childrenNodeList: {
            type: Array,
            default: () => []
        },
        currentChildIndex: {
            type: String,
            default: () => ''
        },
        currentNodeId: {
            type: String,
            default: () => '',
            description: '当前一级节点ID'
        },
        displayCard: {
            type: String,
            default: () => 'ask,confirm,approve,file,plan,tag,invest',
            description: '显示的Card字符串，以,分隔(ask:当前阶段要求，confirm：当前阶段确认事项，approve：提交前需完成审批，file：当前阶段需上传文件，plan：项目计划，tag：标签，invest：当前项目的投资主体)'
        }
    },
    data() {
        return {
            loading: false,
            itemLoading: false,
            formOpen: false,
            nLabel: '',
            accept: ACCEPT_CONFIG.getAll(),
            // 流程状态
            processStatus: {
              N: {
                type: 'info',
                disable: true,
                label: this.$t('未启动')
              },
              Z: {
                type: 'danger',
                label: this.$t('审批终止')
              },
              W: {
                type: 'success',
                label: this.$t('审批完成')
              },
              D: {
                type: 'warning',
                label: this.$t('待审批')
              },
              H: {
                type: 'success',
                label: this.$t('豁免')
              }
            },
            defaultProps: {
              children: 'children',
              label: 'itemName',
              personChargeName: 'personChargeName',
              completionTime: 'completionTime',
              completeSchedule: 'completeSchedule'
            },
            investRule: {
              investorId: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
              // amountInvestmentEstimate: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
            },
            // 当前阶段要求
            processRequirement: undefined,
            // 下一阶段一级节点名称
            nextFirstNodeName: undefined,
            // 确认事项状态
            isConfirmedItem: undefined,
            // 当前阶段要求
            wfConfigConfirmedList: [],
            // 项目计划tree
            dealPlanTreeList: [],
            upload: {
              // 是否显示弹出层（项目导入）
              open: false,
              // 弹出层标题（项目导入）
              title: '',
              // 是否禁用上传
              isUploading: false,
              // 设置上传的请求头部
              headers: { Authorization: 'Bearer ' + getToken(), businessId: this.$route.query.id, directoryId: undefined, nodeId: undefined },
              // 上传的地址
              url: process.env.VUE_APP_BASE_API + '/node/wfBusNode/uploadFileFlowCard',
              // 遮罩层
              loading: false
            },
            fileList: [],
            // 依赖节点集合
            wfBusNodeRelyList: [],
            // 项目跟踪列表
            dealTrackList: [],
            // 事项类型字典
            itemTypeOptions: [],
            // 跟踪方式字典
            trackModeOptions: [],
            // 当前项目信息
            dealBaseData: {},
            radioPlan: 0,
            dealTrackId: '',
            dealLoading: false,
          investLoading: false,
          investFormOpen: false,
          investForm: {},
          investList: []
        }
    },
    computed: {
      item() {
        return item
      }
    },
    watch: {
      currentChildIndex: {
          handler(val) {
              if (val) {
                  var row = this.childrenNodeList.find(v => v.id === val)
                  if (row) {
                      this.nLabel = row.wfConfigNode.nodeName
                  }
              }
          },
          deep: true,
          immediate: true
      },
      currentNodeId: {
        handler() {
            this.getParentNodeRightData()
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      this.getDicts('item_type').then(response => {
        this.itemTypeOptions = response.data
      })
      this.getDicts('track_mode').then(response => {
        this.trackModeOptions = response.data
      })
      // 获取当前项目负责人
      if (this.$route.query.id) {
        getDealBase(this.$route.query.id).then(response => {
          this.dealBaseData = response.data === null ? { personCharge: this.$store.state.user.userId } : response.data
        })
      }
    },
    mounted() {
      this.getProjectPlanList()
      this.$nextTick(() => {
        this.$refs.tag.init('deal')
      })
    },
    methods: {
      moneyFormat,
      itemTypeFormat(row) {
        return this.selectDictLabel(this.itemTypeOptions, row.itemType)
      },
      trackModeFormat(row) {
        return this.selectDictLabel(this.trackModeOptions, row.trackMode)
      },
      formatText(htmlStr) {
        if (!htmlStr) return ''
        return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '').replace(/&nbsp;/ig, '')
      },
      // 根据一级节点ID获取右侧的Card数据
      getParentNodeRightData() {
        console.log('this.currentNodeId', this.currentNodeId)
        if (this.currentNodeId) {
          this.loading = true
          this.getList()
          // 获取投资主体
          listDealInvestment({ dealId: this.$route.query.id }).then((res) => {
            this.investList = res.rows
          })
          getFirstNodeRightCardData(this.currentNodeId, this.$route.query.id).then(response => {
            // 当前阶段要求
            this.processRequirement = response.data.processRequirement
            this.isConfirmedItem = response.data.isConfirmedItem
            // 当前阶段确认事项列表
            this.wfConfigConfirmedList = response.data.wfConfigConfirmedList
            if (response.datas.wfConfigNodeNext) {
              this.nextFirstNodeName = response.datas.wfConfigNodeNext.nodeName
            } else {
              this.nextFirstNodeName = undefined
            }
            this.fileList = response.datas.fileList
            this.wfBusNodeRelyList = response.datas.wfBusNodeRelyList
            // 获取这些文件对应的目录权限, 判断该附件所在目录是否可以下载文件
            if (this.fileList) {
              var ids = []
              this.fileList.forEach(item => {
                if (!this.isEmpty(item.fileId)) {
                  ids.push(item.fileId)
                }
              })
              findFileByIdsHavePer(ids.join(',')).then(fileRes => {
                console.log(fileRes)
                fileRes.data && fileRes.data.forEach(item => {
                  this.fileList.forEach(item2 => {
                    if (item.id === item2.fileId) {
                      item2.fileLibraryRole = item.fileLibraryRole
                      item2.createBy = item.createBy.id
                    }
                  })
                })
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            } else {
              this.loading = false
            }
          })
        }
      },
      onChange() {
        if (this.investForm.investorId) {
          getFundBase(this.investForm.investorId).then(res => {
            this.investForm.currency = res.data.currency
          })
        }
      },
      // 保存投资主体
      submitForm() {
        this.$refs.investForm.validate(valid => {
          if (valid) {
            this.investForm.dealId = this.$route.query.id
            this.investForm.investorType = 'fund'
            saveDealInvestment(this.investForm).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: this.$t('保存成功'),
                  showClose: true,
                  type: 'success'
                })
                this.getParentNodeRightData()
              }
              this.cancel()
            })
          }
        })
      },
      cancel() {
        this.investForm = {
          investorId: undefined,
          amountInvestmentEstimate: undefined
        }
        this.resetForm('investForm')
        this.investFormOpen = false
      },
      // 在线预览附件
      onlinePreview(fileBase) {
        console.log(fileBase, '文件')
        var fileId = fileBase.fileId
        this.$refs.OnlinePreview.onlinePreviewFile(fileId, 'view')
      },
      getList() {
        this.dealLoading = true
        getDealBeforeInfo(this.$route.query.id, this.$route.query.companyId).then(response => {
          this.dealTrackList = response.data.dealTrackList
          this.dealLoading = false
        })
      },
      updateHandle(row) {
        this.dealTrackId = this.$route.query.id
        this.formOpen = true
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.dealTrackForm.init(row)
        })
      },
      addHandle() {
        if (this.radioPlan === 1) { // 添加项目计划
          this.formOpen = true
          this.$nextTick(() => {
              // 调用form页面的 init 方法初始化数据
              this.$refs.dealSuperviseForm.init(null)
          })
        } else { // 添加项目跟踪
          this.dealTrackId = this.$route.query.id
          this.formOpen = true
          this.$nextTick(() => {
              // 调用form页面的 init 方法初始化数据
              this.$refs.dealTrackForm.init(null)
          })
        }
      },
      // 添加投资主体
      addDealInvestHandle() {
        this.investFormOpen = true
      },
      getProjectPlanList() {
        const param = {
          dealId: this.$route.query.id,
          complete: 'N'
        }
        findDealPlanTreeList(param).then(response => {
          this.dealPlanTreeList = response.rows
        })
      },
      // 格式化节点审批状态
      processStatusFormat(actStatus) {
        if (actStatus === 'N') {
          return '未启动'
        } else if (actStatus === 'Z') {
          return '审批终止'
        } else if (actStatus === 'W') {
          return '审批完成'
        } else if (actStatus === 'D') {
          return '待审批'
        } else if (actStatus === 'H') {
          return '豁免'
        } else {
          return '未启动'
        }
      },
      // 下载附件
      downloadDocumentFile(fileId) {
        downLoadFileOpen(fileId)
      },
      // 确认选择事项
      addIndexHandel(index, flag) {
        this.itemLoading = true
        if (flag) {
          // 确定事项录入
          this.$set(this.wfConfigConfirmedList[index], 'flag', true)
          const dataForm = {
            nodeId: this.currentNodeId,
            configConfirmedId: this.wfConfigConfirmedList[index].id,
            busId: this.$route.query.id
          }
          saveWfBusNodeConfirmed(dataForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('操作成功'))
              this.itemLoading = false
            }
          })
        } else {
          this.$set(this.wfConfigConfirmedList[index], 'flag', false)
          const dataForm = {
            nodeId: this.currentNodeId,
            configConfirmedId: this.wfConfigConfirmedList[index].id,
            busId: this.$route.query.id
          }
          deleteWfBusNodeConfirmed(dataForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('操作成功'))
              this.itemLoading = false
            }
          })
        }
      },
      /** 修改按钮操作 */
      handleNodeClick(row) {
        this.formOpen = true
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.dealSuperviseForm.init(row)
        })
      },
      // (Excel规则计算分配数据)
      handleBeforeUploadExcel(file, fileList) {
        console.log(fileList)
      },
      // 上传附件时，文档目录ID
      startUpload(directoryId) {
        this.upload.headers.directoryId = directoryId
        this.upload.headers.nodeId = this.currentNodeId
      },
      // 文件上传成功处理(Excel规则计算分配数据)
      handleFileSuccessExcel(response) {
        this.upload.open = false
        this.upload.isUploading = false
        if (response.code === 200) {
          this.fileList = response.data.data
          this.msgSuccess(this.$t('上传成功！'))
        } else if (response.code === 500) {
          this.msgError(this.$t('数据异常'))
        } else {
          this.$notify({
            title: this.$t(response.msg),
            message: '',
            type: 'success'
          })
        }
      },
      // 文件达到上限处理(Excel规则计算分配数据)
      handleFileExceedExcel() {
        this.msgError(this.$t('可上传文件数量已达到上限'))
      }

    }
}
</script>
<style lang="scss" scoped>
.ml10{
  margin-left: 10px;
}
/deep/ .dealTrackDialog .el-dialog__body {
    padding: 0 !important;
}

/deep/ .el-card__body{
  max-height: 320px;
  overflow: auto;
}
/deep/ .checkCard{
  .el-checkbox{
    width: 100%;
    display: flex;
    align-items: center;
    .el-checkbox__label{
      width: calc(100% - 20px);
      overflow: hidden;
      font-size: 12px;
      text-overflow: ellipsis;
    }
  }
}
.area-header-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .card-left{
        font-size: 14px;
        display: flex;
        align-items: center;
        column-gap: 5px;
        i{
            color: #257CFF;
        }
    }
    .card-right{
        font-size: 13px;
    }
}
.dividerMargin{
    margin: 10px 0;
}
/deep/.uploadExcel {
  margin-left: 0;
  display: inline-block !important;
  .el-upload-list {
    display: none;
  }
}
.flexRight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
}
.tableFlow {
  border-collapse: collapse;
  td{
    font-size: 12px;
    border-bottom: 1px solid #dcdfe6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100px;
    padding-right: 10px;
    &:last-child{
      padding-right: 0;
      text-align: right;
    }
  }
  .maxWid{
    max-width: 85px;
  }
}
.custom-tree-node {
  font-size: 12px;
  width: 100%;
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 5px;
}
.describe {
  margin-top: 3px;
  color: rgba(0,0,0,0.45);
}
/deep/ .planTree .el-tree-node__content {
  height: 45px;
}
.font12{
  font-size: 12px;
}
.statusCard{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  //min-width: 115px;
  font-size: 12px;
  line-height: 30px;
}
.ml15{
  margin-left: 15px;
}
.text{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  font-size: 13px;
}
.scrollArea{
  padding: 0;
}
.msgCount{
  position: relative;
  display: inline-block;
  float: right;
  padding: 0 3px 0 0;
  margin-left: 10px;
  .icon{
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    right: -8px;
    top: -3px;
    zoom: 0.9;
  }
}
</style>
